<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <input type="checkbox" v-model="checkAll">全选
        </div>
        <hr>
        <div v-for="item in list">
            <!-- v-model绑定checkbox，如果绑定的是数组，拿到是value，如果绑定的是非数组，拿到的是选中状态 -->
            <!-- item.isCheck，是非数组，所以此时拿到选中状态 -->
            <input v-model="item.isCheck"  type="checkbox">{{item.name}}
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                list: [
                    { name: '唱', isCheck: false },
                    { name: '跳', isCheck: false },
                    { name: 'rap', isCheck: false },
                    { name: '打篮球', isCheck: false },
                ] 
            },
            computed: {
                // checkAll () {
                    
                //     // 都选中才是true，有一个没选中就是false
                //     // 所以应该用every
                //     return this.list.every(v => v.isCheck)
                // }

                checkAll: {

                    // 把数据显示到界面 --> 对计算属性就是取值，调用get
                    get () {
                        return this.list.every(v => v.isCheck)
                    },

                    // 界面上改变 --> 对计算属性赋值，调用set
                    set (val) {
                        // 遍历数组，把每一项设置为val
                        this.list.forEach(v => v.isCheck = val)
                    }
                }
            }
        })
    </script>
</body>
</html>